import { createContext } from "react"

// connect 要用到 state
export let state = undefined
export let reducer = undefined
let listeners = []

const setState = newState => {
    console.log('newState ====> ', newState)
    state = newState
    // 当订阅者发生改变 通知所有订阅者更新
    // 在更新过程中处理要不要update
    listeners.map(fn => fn(state))
}


// 全局状态 不使用useState的原因是因为造成不必要的更新
export const Store = {
    // state: undefined,
    getState() {
        return state
    },
    // redux 中Store中不包含 reducer 所以要放到外面
    // reducer: undefined,
    // setState(newState) {
    //     console.log('newState ====> ', newState)
    //     state = newState
    //     // 当订阅者发生改变 通知所有订阅者更新
    //     // 在更新过程中处理要不要update
    //     listeners.map(fn => fn(state))
    // },
    dispatch(action){
        setState(reducer(state, action))
    },
    // listeners 也放到外面 
    // listeners: [],
    // 订阅的
    subscribe(fn) {
        // 当有订阅connect产生的时候
        listeners.push(fn)

        return () => {
            // 取消订阅
            const index = listeners.indexOf(fn)
            listeners.splice(index, 1)
            console.log('执行了移除')
        }
    },
}

const appStore = createContext(null)
// 直接把仓库返回出去
export default appStore

// 返回一个专门创建store的方法
export const createStore = (_reducer, _state) => {
    state = _state
    reducer = _reducer
    return Store
}